<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="queryForm">
        <el-form-item>
          <el-input v-model="queryForm.keyword" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.list" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="课程名称" width="120" sortable>
      </el-table-column>
<!--      <el-table-column prop="manager.username" label="老师负责人" width="120" sortable>-->
<!--      </el-table-column>-->
      <el-table-column prop="parent.name" label="所属课程" width="120" sortable>
      </el-table-column>
      <el-table-column prop="sortIndex" label="索引" width="100" sortable>
        <template scope="scope">
          <span v-if="scope.row.state == 1" style="color: #18c79c">开启</span>
          <span v-else style="color: indianred">关闭</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200" sortable>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="200" sortable>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <!--
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="pageInfo.total" style="float:right;">
      -->
      <el-pagination
          style="float:right;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryForm.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
      </el-pagination>
    </el-col>



    <!--保存界面-->
    <el-dialog title="保存" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="saveForm.name" auto-complete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="讲师" prop="manager">-->
<!--          &lt;!&ndash;-->
<!--            clearable: 下拉框可清除选项-->
<!--            value-key="id" 唯一属性-->
<!--            v-model="saveForm.manager"  下拉框双向绑定 -> 和对象-->
<!--          &ndash;&gt;-->
<!--          <el-select v-model="saveForm.manager" clearable value-key="id" placeholder="请选择">-->
<!--            &lt;!&ndash;下拉选项-->
<!--               v-for="item in employees" 循环 总的去查一下员工们-->
<!--               :key="item.id" 是option的唯一标识-->
<!--               :label="item.username" option文本节点显示的内容-->
<!--               :value="item" 当你选中这个option的时候他的value就是这个option的值-->
<!--            &ndash;&gt;-->
<!--            <el-option-->
<!--                v-for="item in employees"-->
<!--                :key="item.id"-->
<!--                :label="item.username"-->
<!--                :value="item">-->
<!--              <span style="float: left">{{ item.username }}</span>-->
<!--              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="父课程" prop="parentId">
          <el-cascader v-model="saveForm.parent"
                       :options="deptTree"
                       :props="{
							   checkStrictly: true,
							   label:'name',
							   value:'id'
							}"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item label="索引">
          <el-radio-group v-model="saveForm.sortIndex">
            <el-radio class="radio" :label="1">开启</el-radio>
            <el-radio class="radio" :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
// import util from '../../common/js/util'
// import NProgress from 'nprogress'
// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

export default {
  data() {
    return {
      deptTree:[], // 部门树数据
      employees:[], // 管理员数组
      queryForm: {
        keyword: '',
        pageSize: 10,
        currentPage: 1
      },
      pageInfo: {
        list: [],
        total: 0
      },
      page: 1,
      listLoading: false,
      sels: [],//列表选中列
      saveFormVisible: false,//新增界面是否显示
      saveLoading: false,
      saveFormRules: {
        name: [
          {required: true, message: '请输入课程名称', trigger: 'blur'}
        ]
      },
      //新增界面数据
      saveForm: {
        id:null,
        name:"",
        sortIndex:null,
        manager:{
          "id":null,
          "username":""
        },
        parent:{
          "id":null,
          "name":""
        },
        parentId:null
      }

    }
  },
  methods: {
    // 查询部门树
    getCourseTypeTree(){
      this.$http.get("/courseType/tree")
          .then(res => {
            var data = res.data
            if (data.success){
              this.deptTree = data.data
            }
          })
          .catch(res => {
            console.log("失败", res)
          })
    },
    // 查询部门主管数据
    getManager(){
      this.$http.get("/emp")
          .then(res => {
            var data = res.data
            if (data.success){
              this.employees = data.data

            }
          })
          .catch(res => {
            console.log("失败", res)
          })
    },
    // 点击编辑按钮
    handleEdit(index,row){
      // 查询员工 和部门树
      this.getCourseTypeTree()
      this.saveForm = row
      var split = row.dirPath.split("/");
      var parentUrl = [];
      for (let i = 1; i < split.length-1; i++) {
        parentUrl.push(Number.parseInt(split[i]))
      }
      console.log(parentUrl)
      this.saveForm.parent = parentUrl
      this.saveFormVisible = true;
    },
    // 点击查询按钮
    getQuery(){
      this.queryForm.currentPage = 1
      this.getCourseTypes()
    },
    // 当每页条数改变的时候会自动触发的函数
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.getCourseTypes();
    },

    handleCurrentChange(val) {
      this.queryForm.currentPage = val;
      this.getCourseTypes();
    },
    //获取部门列表
    getCourseTypes() {

      this.listLoading = true;
      // 发请求
      this.$http.post("/courseType", this.queryForm)
          .then(res => {
            var data = res.data
            if (data.success){
              this.listLoading = false
              this.pageInfo = data.data

            }
          })
          .catch(res => {
            console.log("失败", res)
          })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 发送请求
        this.$http.delete("/courseType/"+row.id)
            .then(res=>{
              var data = res.data
              if (data.success){
                this.listLoading = false;
                // this.queryForm.currentPage = 1;
                // this.getCourseTypes()
                this.handleCurrentChange(1)
              }
            })
            .catch(res=>{

            })
      }).catch(() => {

      });
    },

    //显示新增界面
    handleSave: function () {

      this.saveFormVisible = true;
      this.saveForm = {
        id:null,
        name:"",
        state:null,
        manager: {id:null,username:""},
        parent:{
          "id":null,
          "name":""
        },
        parentId:null
      };
      // 查询上级部门树
      this.getCourseTypeTree();
    },

    //保存
    saveSubmit: function () {
      this.$refs.saveForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            // 处理 parent数据
            var parent = this.saveForm.parent;
            if (parent.length>=0){
              if (parent.length == 0){
                this.saveForm.parent={id:null,name:""}
              }else{
                this.saveForm.parent={
                  id:parent[parent.length-1],
                  name:""
                }
              }
            }

            this.saveLoading = true;
            this.$http.put("/courseType",this.saveForm)
                .then(res=>{
                  var data = res.data
                  if(data.success){
                    this.saveLoading = false;
                    this.saveFormVisible = false;
                    this.handleCurrentChange(1)

                  }
                })
          });
        }
      });
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 发送批量删除请求
        this.$http.patch("/courseType", ids)
            .then(res => {
              var data = res.data
              if (data.success){
                this.listLoading = false
                this.handleCurrentChange(1)

              }
            })
            .catch(res => {
              console.log("失败", res)
            })

      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getCourseTypes();
  }
}

</script>

<style scoped>

</style>